<template>
    <div class="login-container">
      <div class="login-box">
        <div class="login-header">
          <img src="/logo.png" alt="海淘国际" class="logo">
          <h2>开通会员账户</h2>
        </div>
        <form @submit.prevent="handleSubmit">
          <div class="input-group">
            <input
              type="text"
              v-model="username"
              placeholder="请输入用户名"
            />
          </div>
          <div class="input-group">
            <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
            />
          </div>
          <div class="input-group">
            <input
              type="password"
              v-model="confirmPassword"
              placeholder="确认密码"
            />
          </div>
          <div class="input-group">
            <input
              type="text"
              v-model="phone"
              placeholder="手机号"
            />
          </div>
          <div class="verify-code">
            <input type="text" placeholder="请输入验证码">
            <button type="button" class="code-btn">获取验证码</button>
          </div>
          <button type="submit" class="submit-btn">提交</button>
        </form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  const username = ref('')
  const password = ref('')
  const confirmPassword = ref('')
  const phone = ref('')
  
  const handleSubmit = () => {
    if (username.value && password.value) {
      router.push('/')
    }
  }
  </script>
  
  <style scoped>
  .login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #000 0%, #333 100%);
  }
  
  .login-box {
    background: white;
    padding: 2rem;
  box-sizing: border-box;

    border-radius: 8px;
    width: 100%;
    max-width: 400px;
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .logo {
    height: 60px;
    margin-bottom: 1rem;
  }
  
  .input-group {
    margin-bottom: 1rem;
  }
  
  input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  box-sizing: border-box;

  }
  
  .verify-code {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .code-btn {
    padding: 0 1rem;
  box-sizing: border-box;

    background: #000;
    color: white;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
  }
  
  .submit-btn {
    width: 100%;
    padding: 0.8rem;
    background: #000;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
  box-sizing: border-box;

    cursor: pointer;
  }
  
  button:hover {
    background: #333;
  }
  </style> 